<template>
  <div>
    <el-button type="primary" size="small" @click="addRole">新增角色</el-button>
    <el-table class="role-table" :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="180"></el-table-column>
      <el-table-column prop="name" label="角色" width="180"> </el-table-column>
      <el-table-column prop="description" label="描述"> </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button size="small" type="success" @click="handlerAssign(row)">分配权限</el-button>
          <el-button size="small" type="primary" @click="handlerEdit(row)"
            >编辑</el-button
          >
          <el-button size="small" type="danger" @click="handlerDelete(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <el-pagination
        layout="prev, pager, next"
        :page-size="pagesize"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-row>
    <!-- 新增/编辑角色弹框 -->
    <addRole
      :visible.sync="dialogShow"
      :row="row"
      :is-edit="isEdit"
      @success="initData"
    ></addRole>
    <!-- 角色分配权限弹框 -->
    <assignPms ref="assign" :visible.sync="assignPmsShow"></assignPms>
  </div>
</template>

<script>
import { roleListApi, delRoleApi, getRoleInfoById } from '@/api/setting'
import addRole from './add-role.vue'
import assignPms from './assign-pms.vue'
export default {
  data() {
    return {
      tableData: [], // 存储角色列表数据
      page: 1, // 当前页码
      pagesize: 3, // 每页请求多少条数数据
      total: 0, // 数据总条数
      dialogShow: false, // 控制弹框的显示与关闭
      isEdit: false, // 编辑状态标志
      row: {}, // 存储当前要编辑的数据
      assignPmsShow: false // 控制分配权限弹框
    }
  },
  components: {
    addRole,
    assignPms
  },
  created() {
    this.initData()
  },
  methods: {
    // 分配权限
    async handlerAssign(row) {
      await this.$refs.assign.getRoleDetail(row.id)
      this.assignPmsShow = true
    },
    // 新增角色
    addRole() {
      this.isEdit = false
      this.dialogShow = true
    },
    // 处理编辑逻辑
    async handlerEdit(row) {
      // console.log(row)
      // this.row = JSON.parse(JSON.stringify(row))
      this.row = await getRoleInfoById(row.id)
      this.isEdit = true
      this.dialogShow = true
    },
    // 处理删除逻辑
    async handlerDelete(row) {
      await this.$confirm('此操作将删除角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delRoleApi(row.id)
      // 删除逻辑优化：判断当前页表格数据是否只有一条，如果只有一条数据并且删除成功了，页码需要回退一页，否则当前页请求不到数据
      if (this.tableData.length === 1 && this.page > 1) this.page -= 1
      this.$message.success('删除成功')
      this.initData()
    },
    // 初始化表格数据
    async initData() {
      const { total, rows } = await roleListApi({
        page: this.page,
        pagesize: this.pagesize
      })
      this.total = total
      this.tableData = rows
    },
    // 监听分页页码变化
    handleCurrentChange(val) {
      console.log(val)
      this.page = val
      this.initData()
    }
  }
}
</script>

<style scoped>
.role-table {
  margin: 20px 0;
}
</style>